.course-overlay__header-container {
  max-width: 48rem;
}

@screen xl {
  .course-overlay__header-container {
    max-width: 60rem;
  }
}

.course-overlay__header-title-card {
  @apply text-gray-900 border border-transparent rounded-lg;
}

@screen lg {
  .course-overlay__header-title-card {
    @apply border-t-0 rounded-t-none;
  }
}

/* Course overlay title */

.course-overlay__header-title-card--pending {
  @apply bg-orange-100 border-orange-400;
}

.course-overlay__header-title-card--pending-review {
  @apply bg-blue-100 border-blue-400;
}

.course-overlay__header-title-card--completed {
  @apply bg-green-100 border-green-400;
}

.course-overlay__header-title-card--rejected {
  @apply bg-red-100 border-red-400;
}

.course-overlay__header-title-card--locked {
  @apply bg-gray-50 border-gray-600;
}

/* Course overlay close button */

.course-overlay__close {
  left: 1.5rem;
  top: -2rem;
}

@screen lg {
  .course-overlay__close {
    left: -5rem;
    top: 0;
  }
}

.course-overlay__close--pending {
  @apply bg-orange-100 border-orange-400 text-orange-700;
}

.course-overlay__close--pending-review {
  @apply bg-blue-100 border-blue-400 text-blue-800;
}

.course-overlay__close--completed {
  @apply bg-green-100 border-green-400 text-green-800;
}

.course-overlay__close--rejected {
  @apply bg-red-100 border-red-400 text-red-800;
}

.course-overlay__close--locked {
  @apply bg-gray-50 border-gray-600 text-gray-800;
}

@screen lg {
  [class*="course-overlay__close--"] {
    @apply bg-white border-gray-300 text-gray-600;
  }
}

.complete-button-selected {
  animation: completeButtonGlowing 500ms ease-in;
  @apply border-focusColor-400;
}

.course-overlay__body-tab-item {
  @apply border border-gray-300 rounded-t-lg;
}

.course-overlay__body-tab-item:not(:last-child) {
  @apply me-1;
}

.course-overlay__body-tab-item--selected {
  @apply bg-white text-primary-500;
  border-bottom-color: transparent;
}

.course-overlay__prerequisite-targets:before {
  content: "";
  @apply absolute top-0 bottom-0 bg-primary-400;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  z-index: 0;
}

/* Styling overlay content skeleton loading */

.course-overlay__skeleton-line-placeholder-sm {
  @apply rounded-full bg-gray-50;
  height: 0.625rem;
}

.course-overlay__skeleton-line-placeholder-md {
  @apply rounded-full bg-gray-50;
  height: 1rem;
}

.course-overlay__skeleton-image-placeholder {
  @apply mt-5 h-48 rounded-lg bg-gray-50;
}

.skeleton-animate {
  animation: skeletonShimmer 3s infinite linear;
  background: linear-gradient(
    to right,
    theme("colors.gray.100"),
    theme("colors.gray.200"),
    theme("colors.gray.100")
  );
  background-size: 1000px 100%;
}

@keyframes skeletonShimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

/* Keyframe animation for complete button */

@keyframes completeButtonGlowing {
  0% {
    box-shadow: 0 0 20px theme("colors.focusColor.400");
  }
  50% {
    box-shadow: 0 0 10px theme("colors.focusColor.400");
  }
  100% {
    box-shadow: 0 0 0 theme("colors.focusColor.400");
  }
}

@media print {
  .curriculum-overlay__learn-submit-btn,
  .curriculum-overlay__learn-auto-verify-btn {
    display: none;
  }
}
